<template>
  <el-dialog v-model="drawer" title="回款规则" width="600px" :append-to-body="true" @close="close">
    <el-row style="margin:-10px 0 10px;">
        <el-button size="small" type="primary" @click="addRule">添加回款规则</el-button>
    </el-row>
    <el-table size="small" :data="list">
        <el-table-column label="最小容忍区间" prop="minMoney" align="center"></el-table-column>
        <el-table-column label="最大容忍区间" prop="maxMoney" align="center"></el-table-column>
        <el-table-column label="容忍差距金额" prop="tolerateMoney" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-button @click="edit(scope.row)" type="primary" link size="small">编辑</el-button>
                <el-button @click="del(scope.row)" type="danger" link size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page-block">
        <el-pagination
            v-model:currentPage="pageNum"
            v-model:page-size="pageSize"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
        />
    </div>
    <fund-rule v-model:dialogDrawer="dialogEdit" v-model:isEdit="isEdit" v-model:defaultForm="rowForm" @onSubmit="fundSubmit"></fund-rule>
  </el-dialog>
</template>

<script>
import { toRefs, computed, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useOrderApi } from '/@/api/order/index'
import FundRule from './FundRule.vue'
export default {
    name: 'MoneyList',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        }
    },
    components: {
        FundRule
    },
    setup(props, context) {
        const { dialogDrawer } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    getList()
                }
            }
        )
        const orderApi = useOrderApi()
        const state = reactive({
            list: [],
            rowForm: {},
            isEdit: false,
            dialogEdit: false,
            pageNum: 1,
            pageSize: 10,
            total: 0
        })
        const addRule = () => {
            state.isEdit = false
            state.dialogEdit = true
        }
        const edit = row => {
            state.isEdit = true
            state.rowForm = row
            state.dialogEdit = true
        }
        const del = row => {
            ElMessageBox.confirm(
                `是否确定删除此规则`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                orderApi.delMoneyRule(row.id).then(() => {
                    ElMessage.success('删除成功')
                    getList()
                })
            })
        }
        const getList = () => {
            orderApi.moneyList({
                pageNum: state.pageNum,
                pageSize: state.pageSize
            }).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const fundSubmit = () => {
            getList()
        }
        const handleCurrentChange = val => {
            state.pageNum = val
            getList()
        }
        return {
            ...toRefs(state),
            drawer,
            edit,
            del,
            addRule,
            close,
            fundSubmit,
            handleCurrentChange
        }
    }
}
</script>

<style>

</style>